import React, { useState, useEffect } from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';

import Home from './child/Home'
import Shoplist from './child/Shoplist';
import Typelist from './child/TypeList';
import { Switch, Route, Redirect } from 'react-router-dom/cjs/react-router-dom.min';

import { useSelector, useDispatch } from 'react-redux';
import { async_shoplist, async_typelist } from '../store/reducer';
import { Space } from 'antd';

const { Header, Sider, Content } = Layout;

/* 布局组件 */
const Admin = (props) => {

    let dispatch = useDispatch()
    //获取数据 初始周期和更新周期执行
    useEffect(() => {
        dispatch(async_shoplist())
        dispatch(async_typelist())
    }, [])

    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout style={{ height: '100vh' }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical" />
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={[props.location.pathname]} //高亮
                    defaultOpenKeys={['', props.location.pathname]}//初始默认展开
                    items={[ //定义左侧导航栏
                        {
                            key: '/admin/home',
                            icon: <UserOutlined />,
                            label: '首页',
                        },
                        {
                            key: '',
                            icon: <VideoCameraOutlined />,
                            label: '商品列表',
                            children: [
                                {
                                    key: '/admin/shoplist',
                                    icon: <UploadOutlined />,
                                    label: '商品列表',
                                },
                                {
                                    key: '/admin/typelist',
                                    icon: <UploadOutlined />,
                                    label: '分类列表',
                                },
                            ]
                        },
                    ]}
                    /* 通过事件进行跳转 */
                    onSelect={(e) => {
                        props.history.push(e.key)
                    }}
                />
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer }}>
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                        <Space style={{position:'absolute',right:'20px'}}>
                            <span>用户名:{localStorage.getItem('token')}</span>
                            <Button onClick={() => {
                                //删除token
                                localStorage.removeItem('token')
                                //跳转到登录页
                                props.history.push('/login')
                            }}>退出登录</Button>
                        </Space>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    {/* 配置二级路由 */}
                    <Switch>
                        <Route path='/admin/home' component={Home} />
                        <Route path='/admin/shoplist' component={Shoplist} />
                        <Route path='/admin/typelist' component={Typelist} />
                        <Redirect from='/admin' to='/admin/home' />
                    </Switch>
                </Content>
            </Layout>
        </Layout>
    );
};
export default Admin;